<template>
    <div>
        <el-container class="main_container">
            <el-header :style="tempFrameColor">
                <div class="left_box">
                    <img src="../assets/image/logo.png" alt="丢失了">
                    <span>评卷系统</span>
                </div>
                <div class="right_box">
                    <el-dropdown class="homeUserInfo" @command="commandHander">
                      <span>
                        {{this.user.name}}<i><img :src="this.user.userFace" alt="丢失了"></i>
                      </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
                            <el-dropdown-item command="setting">个性设置</el-dropdown-item>
                            <el-dropdown-item command="logout">注销登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <el-dialog title="个性设置" :visible.sync="dialogVisible" width="50%">
                    <span><el-tag>外框颜色</el-tag></span>
                    <el-divider direction="vertical"></el-divider><el-divider>
                        <el-color-picker
                                @change="changeFrameBackground(frameColor)"
                                v-model="frameColor"></el-color-picker>
                    </el-divider>
                    <span><el-tag>内框颜色</el-tag></span>
                    <el-divider direction="vertical"></el-divider>
                    <el-divider>
                    <el-color-picker
                            @change="changeMainBackground(mainColor)"
                            v-model="mainColor"></el-color-picker>
                    </el-divider>
                </el-dialog>
            </el-header>
            <el-container>
                <!--侧边栏-->
                <el-aside :width="isCollapse?'64px':'200px'" :style="tempFrameColor">
                    <div class="toggle_box" @click="toggleCollapse">|||</div>
                    <el-menu
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"
                            :collapse="isCollapse"
                            router
                    >
                        <!-- this.$router.options.routes -> routes :index 需要字符串-->
                        <div v-for="(item,index) in routes" :key="index">
                            <el-submenu :index="index+''" v-if="!item.hidden" :style="tempFrameColor">
                                <template slot="title">
                                    <i :class="item.iconCls" style="margin-right: 30px;margin-top: -7px;"></i>
                                    <span style="color: white;">{{item.name}}</span>
                                </template>
                                <div :style="tempFrameColor" >
                                    <el-menu-item :index="children.path" v-for="(children,indexj) in item.children"
                                                  :key="indexj" style="color: white;" v-show="!children.hidden">
                                            {{children.name}}
                                    </el-menu-item>
                                </div>
                            </el-submenu>
                        </div>
                    </el-menu>
                </el-aside>
                <el-main :style="tempMainColor">
                    <!--首页去除首页面包屑作用-->
                    <el-breadcrumb separator-class="el-icon-arrow-right" v-if="this.$router.currentRoute.path!='/home'"
                                   style="margin-bottom: 15px">
                        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <!--首页加入欢迎语句-->
                    <div class="homeWelcome" v-if="this.$router.currentRoute.path=='/home'">

                        <el-divider>欢 迎 使 用</el-divider>
                        <el-collapse v-model="activeNames" @change="handleChange">
                            <el-collapse-item title="*🔈~一致性 Consistency" name="1">
                                <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
                                <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
                            </el-collapse-item>
                            <el-collapse-item title="*🔈~反馈 Feedback" name="2">
                                <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
                                <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                            </el-collapse-item>
                            <el-collapse-item title="*🔈~效率 Efficiency" name="3">
                                <div>简化流程：设计简洁直观的操作流程；</div>
                                <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
                                <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
                            </el-collapse-item>
                            <el-collapse-item title="*🔈~可控 Controllability" name="4">
                                <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
                                <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
                            </el-collapse-item>
                        </el-collapse>
                    </div>

                    <router-view class="homeRouterView"></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data() {
            return {
                // user: JSON.parse(window.sessionStorage.getItem('user')),
                isCollapse: true,
                activePath: '',
                menuList: null,
                tempFrameColor: {'background-color': '#001529'}, // 改变侧框颜色
                tempMainColor: {'background-color': '#E9EEF3', 'color': '#18222b'}, // 改变内容颜色
                frameColor: '#001529',
                mainColor: '#E9EEF3',
                dialogVisible: false,
                activeNames: ['1'], //
            }
        },
        computed: {
            routes() {
                return this.$store.state.routes;
            },
            user(){
                return this.$store.state.currentUser;
            }
        },
        methods: {
            handleChange(val) {
                console.log(val);
            },
            changeFrameBackground(color) {
                this.$message(color);
                this.frameColor = color;
                this.tempFrameColor = {'background-color': color}
            },
            changeMainBackground(color) {
                this.$message(color);
                this.mainColor = color;
                this.tempMainColor = {'background-color': color, 'color': color}
            },
            toggleCollapse() {
                this.isCollapse = !this.isCollapse;
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            commandHander(command) {
                console.log(command);
                if (command == 'setting') {
                    this.dialogVisible = true;
                } else if (command == 'userInfo') {
                    this.$router.push('/common/userInfo');
                } else if (command == 'logout') {

                    this.$confirm('此操作将注销登录,是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // 注销登录
                        this.postRequest('/logout');
                        // 清空用户信息
                        window.sessionStorage.removeItem('tokenStr');
                        window.sessionStorage.removeItem('user');
                        // 清空菜单
                        this.$store.commit('initRoutes', []);
                        // 提示信息
                        this.$message({
                            type: 'success',
                            message: '注销登录成功!'
                        });
                        // 页面跳转
                        this.$router.replace('/');
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消注销登录'
                        });
                    });
                }
            },
        },
        created() {
            var h = document.documentElement.clientHeight || document.body.clientHeight;
            console.log(h);

        },
    }
</script>

<style lang="less" scoped>
    .homeWelcome{
        text-align: center;
        font-size: 30px;
        font-family: 华文楷体;
        color: #409eff;
        padding-top: 50px;
    }
    /*设置整个容器高度*/
    .main_container {
        /*height: 125%;*/
    }

    /*头部布局*/
    .el-header {
        /*background-color: #001529;*/
        display: flex;
        justify-content: space-between;
        padding-left: 0;
        color: #FFFFFF;
        align-items: center;
        font-size: 20px;
        /*左logo和标题*/

        .left_box {
            display: flex;
            align-items: center;
            /*logo*/

            img {
                height: 60px;
                width: 60px;
                border-radius: 50%;
            }

        }

        /*右边用户头像*/

        .right_box {
            img {
                height: 60px;
                width: 60px;
                border-radius: 50%;
                background-color: #FFFFFF;
                margin: 0 15px -4px 0;
                padding: 1px 1px 1px 1px;
                background-size: contain;
            }
        }
    }

    /*侧边栏*/
    .el-aside {
        /*background-color: #001529;*/
        color: white;
        height: 877px;

        .el-menu {
            border-right: none;
            /*background-color: #001529;*/
        }

        /*展开收起*/

        .toggle_box {
            /*background-color: #001529;*/
            font-size: 15px; // |||大小
            font-weight: bold;
            line-height: 30px;
            letter-spacing: 0.2em;
            text-align: center;
            cursor: pointer;
        }

        overflow: hidden;
    }

    /*内容主体*/
    .el-main {
        /*background-color: #E9EEF3;*/
        margin: 10px;
        /*height: 1024px;*/
        /*max-height: inherit;*/
        border-radius: 1%;
    }

    /*下拉样式*/
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
</style>